<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="padding: 0 20px;">
          <el-form ref="dataForm" label-width="130px" size="small">
            <el-row :gutter="20">
              <el-col :span="8">
                <span>表名：</span>
                <el-input v-model="bpmnName"></el-input>
              </el-col>
              <el-col :span="8">
                <span>流程图中文名：</span>
                <el-input v-model="showName"></el-input>
              </el-col>
              <el-col :span="8">
                <span>发起流程角色:</span>
                <el-input v-model="candidateStarterGroups"></el-input>
              </el-col>
            </el-row>
            <el-button style="margin-top:20px" type="primary" @click="addRow(dataList)">新增</el-button>
            <template>
              <el-table :data="dataList" border style=" 100%">
                <el-table-column label="名称" prop="selfName" style="6vw;">
                  <template scope="scope">
                    <el-input v-model="scope.row.selfName" placeholder="可自动生成" size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="流程key" prop="selfKey" style="6vw;">
                  <template scope="scope">
                    <el-input v-model="scope.row.selfKey" placeholder="可自动生成" size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="是否为审批步骤" prop="fildtp">
                  <template scope="scope">
                    <el-select v-model="scope.row.isApproval" clearable>
                      <el-option
                        v-for="item in isApprovalTps"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="角色组" prop="roleNum">
                  <template scope="scope">
                    <el-select v-model="scope.row.roleNum" clearable>
                      <el-option
                        v-for="item in roleTps"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="是否为会议步骤" prop="isMeeting">
                  <template scope="scope">
                    <el-select v-model="scope.row.isMeeting" clearable>
                      <el-option
                        v-for="item in isMeetingTps"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value" textarea 展示xml 排版
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                  <template slot-scope="scope">
                    <el-button size="small" @click.native.prevent="deleteRow(scope.$index, dataList)"> 移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="6">
        <div>
          <el-card style="margin-bottom: 20px">
            <el-row>
              <el-button type="primary" @click="generateBpmn">生成流程图</el-button>
            </el-row>
            <el-row id="xmlCode" style="margin-top: 20px;">
              <!-- <textarea style="margin-top: 20px;height:100%;width:100%;min-height:500px;1px solid black" readonly></textarea> -->
              <codemirror
                ref="mycode"
                :options="cmOptions"
                :value="xmlCode"
                class="code"
              >
              </codemirror>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-card style="margin-bottom: 20px">
            <el-row>
              <el-button type="primary" @click="generateSql">生成sql</el-button>
            </el-row>
            <el-row id="sqlCode" style="margin-top: 20px;">
              <!-- <textarea style="margin-top: 20px;height:100%;width:100%;min-height:500px;1px solid black" readonly></textarea> -->
              <codemirror
                ref="mycode2"
                :options="cmOptions2"
                :value="sqlCode"
                class="code"
              >
              </codemirror>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listRole } from '@/api/system/role'
import { createBpmn } from '@/api/activiti/definition'
import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/rubyblue.css'

require('codemirror/mode/xml/xml')
require('codemirror/mode/sql/sql')

export default {
  name: 'Generate',
  components: {
    codemirror
  },
  data() {
    return {
      dataList: [],
      isApprovalTps: [{ text: '审批步骤', value: true }, { text: '非审批步骤', value: false }],
      isMeetingTps: [{ text: '会议步骤', value: true }, { text: '非会议步骤', value: false }],
      roleTps: [],
      roleList: [],
      xmlCode: '',
      sqlCode: '',
      cmOptions: {
        value: '',
        lineNumbers: true,
        lineWrapping: true,
        mode: 'xml',
        theme: 'rubyblue',
        gutter: true,
        readOnly: true
      },
      cmOptions2: {
        value: '',
        lineNumbers: true,
        lineWrapping: true,
        mode: 'sql',
        theme: 'rubyblue',
        gutter: true,
        readOnly: true
      },
      bpmnName: '',
      showName: '',
      candidateStarterGroups: ''
    }
  },
  created() {
    this.initRole()
  },
  methods: {
    deleteRow(index, rows) {//删除改行
      rows.splice(index, 1)
    },
    addRow(tableData, event) {
      tableData.push({
        selfName: '', selfKey: '', isApproval: true, isMeeting: false, roleNum: ''
      })
    },
    initRole() {
      listRole().then(res => {
        this.roleList = res.rows
        for (let i = 0; i < this.roleList.length; i++) {
          this.roleTps.push({
            text: this.roleList[i].roleName,
            value: i
          })
        }
      })
    },
    generateBpmn() {
      if (this.dataList.length > 0 && (!this.dataList[0].isApproval || !this.dataList[this.dataList.length - 1].isApproval)) {
        let errorMsg = '目前第一个步骤和最后一个步骤仅支持审核类型'
        this.msgError(errorMsg)
        return
      }
      let params = {}
      params.bpmnName = this.bpmnName
      params.showName = this.showName
      params.candidateStarterGroups = this.candidateStarterGroups
      let list = []
      this.dataList.forEach(item => {
        let listData = {}
        listData.roleKey = this.roleList[item.roleNum].roleKey
        listData.roleName = this.roleList[item.roleNum].roleName
        listData.selfKey = item.selfKey
        listData.selfName = item.selfName
        if (item.selfKey !== undefined && item.selfKey !== '') {
          listData.selfComment = item.selfName + 'Comment'
        }
        listData.isApproval = item.isApproval
        listData.isMeeting = item.isMeeting
        list.push(listData)
      })
      params.list = list
      createBpmn(params).then(res => {
        this.xmlCode = res.msg
      })
    },
    generateSql() {
      if (this.dataList.length > 0 && (!this.dataList[0].isApproval || !this.dataList[this.dataList.length - 1].isApproval)) {
        let errorMsg = '目前第一个步骤和最后一个步骤仅支持审核类型'
        this.msgError(errorMsg)
        return
      }
      let _this = this
      let sqlCode = ''
      sqlCode = sqlCode + `INSERT INTO process_schedule_configure (business_key, node_name, node_value, sort, remark) VALUES ('` + _this.bpmnName + `', '创建业务', 'create', 1, NULL);\n`
      sqlCode = sqlCode + `INSERT INTO process_schedule_configure (business_key, node_name, node_value, sort, remark) VALUES ('` + _this.bpmnName + `', '提交', 'submit', 2, NULL);\n`
      let currentNum = 2
      _this.dataList.forEach(item => {
        currentNum = currentNum + 1
        sqlCode = sqlCode + `INSERT INTO process_schedule_configure (business_key, node_name, node_value, sort, remark) VALUES ('` + _this.bpmnName + `', '`
        let a = item.selfName !== undefined && item.selfName !== '' ? item.selfName : (_this.roleList[item.roleNum].roleName + '审批')
        sqlCode = sqlCode + a + `', '`
        let b = item.selfKey !== undefined && item.selfKey !== '' ? item.selfKey : (_this.roleList[item.roleNum].roleKey)
        sqlCode = sqlCode + b + `', `
        sqlCode = sqlCode + currentNum + `, NULL);\n`
      })
      currentNum = currentNum + 1
      sqlCode = sqlCode + `INSERT INTO process_schedule_configure (business_key, node_name, node_value, sort, remark) VALUES ('` + _this.bpmnName + `', '已完结', 'review', ` +
        currentNum
        + `, NULL);\n`
      _this.sqlCode = sqlCode
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 100%;
  display: flex;
}
</style>
<style lang="scss">
.el-form-item--medium {
  .el-form-item__content {
    flex: 1;
  }
}
</style>
<style lang="scss">
#xmlCode {
  .CodeMirror {
    overscroll-y: scroll !important;
    height: 500px !important;
  }
}

#sqlCode {
  .CodeMirror {
    overscroll-y: scroll !important;
    height: 500px !important;
  }
}
</style>
